<template>
  <div class="wrap">
    <div class="titleWrap">
      <div
        class="titleItem"
        :class="{ titleItemActive: status == 0 }"
        @click="changeTitleOptions(0)"
      >
        待结算
      </div>
      <div
        class="titleItem"
        :class="{ titleItemActive: status == 1 }"
        @click="changeTitleOptions(1)"
      >
        已结算
      </div>
    </div>
    <div class="bottomListWrap">
      <div v-if="resCashRecordList.length > 0">
        <div class="item" v-for="(item, index) in resCashRecordList" :key="index" @click="jumpWattingInfo(item.id)">
          <div class="topWrap">
            <p class="textExplain">
              {{
                item.status == 0
                  ? "待结算"
                  :'已结算'
              }}
            </p>
            <div class="rightText">
              <em>￥{{ item.finishPrice||'待审核到账' }}</em>
              <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
            </div>
          </div>
          <div class="time">{{item.finishTime?item.finishTime:item.createTime}} {{item.type==0?'余额提现':'押金提现'}} </div>
        </div>
      </div>
      <div v-else>暂无记录</div>
    </div>
  </div>
</template>

<script>
import { RadioGroup } from "vant";
import { apiWalletFetchList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      showMask: false,
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
      resCashRecordList: [], //押金缴纳记录列表
      status:0,//0待结算，1已结算
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    window.addEventListener("scroll", this.handleScroll, true);
    this.getCashRecordList();
  },
  methods: {
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return;
        }
        this.getCashRecordList();
      }
    },
    changeTitleOptions(i){
        this.status = i
        this.noMore = false
        this.reqPageNum = 0
        this.resCashRecordList = []
        this.getCashRecordList()
    },
    
    //查询提现记录列表:
    getCashRecordList() {
      var page = (this.reqPageNum += 1);
      console.log("page", page);
      apiWalletFetchList({
        pageNum: page,
        pageSize: this.reqpageSize,
        status:this.status,
      }).then((res) => {
        if (res.data.rows.length == 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        this.resCashRecordList = [...this.resCashRecordList, ...dataRes];
        console.log("resCashRecordList-提现记录", this.resCashRecordList);
      });
    },
    //结算详情：
    jumpWattingInfo(i) {
      this.$router.replace({
        path: "/pages/bWattingCount",
        query: {
          //传递参数
          id:i
        },
      });
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
  },
};
</script>

<style scoped>
.titleWrap {
  width: 90%;
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}
.titleItem {
  width: 105px;
  height: 37px;
  line-height: 37px;
  text-align: center;
  border-radius: 19px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.titleItemActive {
  background: #181818;
  color: #fff;
}
.bottomListWrap {
  width: calc(95% - 40px);
  margin: 10px auto;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  padding-bottom: 5px;
}
.item {
  font-size: 13px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 25px;
  /* border-bottom: 1px solid #f6f6f8; */
}
.textExplain {
  float: left;
}
.rightText {
  float: right;
}
.rightArrow {
  padding-left: 3px;
  width: 5px;
  height: 9px;
}
.topWrap {
  overflow: hidden;
  margin-bottom: 10px;
}

</style>
